<template>
  <div>
    <div class="addFleet">
      <el-button type="primary" size="small" @click="add">新增车队</el-button>
    </div>
    <el-table
      v-loading="loading"
      :data="list"
      style="width: 100%;margin-top:10px"
    >
      <el-table-column label="序号" width="60">
        <template slot-scope="scope">
          <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
        </template>
      </el-table-column>
      <el-table-column label="手机号" prop="phone" />
      <el-table-column label="车队名称" prop="fleetName" />
      <el-table-column label="用户余额" prop="balance" >
        <template slot-scope="scope">
          {{scope.row.balance ? scope.row.balance : '0'}}
        </template>
      </el-table-column>
      <el-table-column label="车队账户" prop="phone" />
      <el-table-column label="设备数量" prop="terminalCount" />
      <el-table-column label="注册时间" prop="createdTime" />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="detail(scope.row)">详情</el-button>
          <el-button type="text" @click="edit(scope.row)">编辑</el-button>
          <el-button type="text" @click="del(scope.row)" style="color:#FF5555">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :title="title" :visible.sync="open" width="30%" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="车队名称" prop="fleetName">
          <el-input v-model="form.fleetName" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="车队账号" prop="phone">
          <el-input v-model="form.phone" @input="val=>form.phone = val.replace(/[^\d]/g,'')" placeholder="队长或者负责人手机号"></el-input>
        </el-form-item>
        <el-form-item label="说明" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入" resize="none"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="open = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="车队详情" :visible.sync="userVisible" width="30%" append-to-body>
      <el-row>
        <el-col :span="12">
          车队名称：{{userItem.fleetName}}
        </el-col>
        <el-col :span="12">
          车队账户：{{userItem.phone}}
        </el-col>
      </el-row>
      <el-table
        :data="userList"
        style="width: 100%;margin-top:20px"
        :height="300"
      >
        <el-table-column label="序号" width="60" prop="number" />
        <el-table-column label="手机号" prop="phone"  >
          <template slot-scope="scope">
            <el-input v-if="scope.row.type == 'add'" v-model="scope.row.phone" @input="val=>scope.row.phone = val.replace(/[^\d]/g,'')" placeholder="请输入" />
            <span v-else>{{scope.row.phone}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="delMember(scope.row,scope.$index)" style="color:#FF5555">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
        <el-button type="primary" size="small" icon="el-icon-plus" style="margin-top:10px" @click="addMember"></el-button>
      <span slot="footer" class="dialog-footer">
        <el-button @click="userVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确定</el-button>
      </span>
    </el-dialog>
    <el-dialog
    title="提示"
    :visible.sync="delVisible"
    width="30%">
      <span>是否删除？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="delVisible = false">取 消</el-button>
        <el-button type="primary" @click="delConfirm">确 定</el-button>
      </span>
    </el-dialog>
    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
  </div>
</template>

<script>
import { getFleetUser,addFleet,updateFleet,delFleet,getFleetUserList,bindFleet } from "@/api/common";
export default {
  data(){
    return{
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 表格数据
      list: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      title:'',
      open:false,
      form:{},
      rules:{
        fleetName: [
          { required: true, message: "车队名称不能为空", trigger: "blur" }
        ],
        phone: [
          { required: true, message: "车队账号不能为空", trigger: "blur" }
        ]
      },
      userVisible:false,
      userList:[],
      newUserList:[],
      user:{
        pageNum: 1,
        pageSize: 9999,
      },
      userItem:{},
      userTotal:0,
      delVisible:false
    }
  },
  created() {
    this.getList();
  },
  methods:{
    getList() {
      this.loading = true;
      getFleetUser(this.queryParams).then(response => {
        this.list = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    detail(row){
      this.userVisible = true
      this.userItem = row
      this.newUserList = []
      this.getUserList(row.fleetId)
    },
    getUserList(id){
      if(id && typeof id !== 'object') this.user.fleetId = id
      getFleetUserList(this.user).then(response=>{
        this.userList = response.rows.map((item,index)=>{
          return{
            ...item,
            number:index+1
          }
        });
        this.userTotal = response.total;
      })
    },
    add(){
      this.form = {}
      this.open = true;
      this.title = "新增车队";
    },
    edit(row){
      this.form = JSON.parse(JSON.stringify(row))
      this.open = true;
      this.title = "编辑车队";
    },
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.open = false;
          if (this.form.id != undefined) {
            this.form.id = this.form.fleetId
            updateFleet(this.form).then(() => {
              this.$modal.msgSuccess("修改成功");
              this.getList();
            });
          } else {
            addFleet(this.form).then(() => {
              this.$modal.msgSuccess("新增成功");
              this.getList();
            });
          }
        }
      });
    },
    submit(){
      this.userVisible = false
      console.log(this.newUserList);
      if(!this.newUserList.length) return
      let list = this.newUserList.map(item=>{
        return{
          ...item,
          fleetId:this.user.fleetId
        }
      })
      bindFleet(list).then(res=>{
        if(res.code == 200){
          this.$modal.msgSuccess("添加成功");
          this.getList();
        }
      })
    },
    del(row){
      this.delVisible = true
      this.form = row
    },
    delConfirm(){
      this.delVisible = false
      delFleet(this.form).then(res=>{
        if(res.code == 200){
          this.$modal.msgSuccess("删除成功");
          this.getList();
        }
      })
    },
    delMember(item,index){
      let _index = this.newUserList.map(e=>e.number).indexOf(item.number)
      if(_index > -1) {
        this.userList.splice(index,1)
        this.newUserList.splice(_index,1)
      }else{
        let req = {
          fleetId:this.user.fleetId,
          ...item
        }
        delFleet(req).then(res=>{
          if(res.code == 200){
            this.$modal.msgSuccess("删除成功");
            this.getUserList();
            this.getList()
          }
        })
      }
    },
    addMember(){
      let item = {
        number:this.userList.length + 1,
        phone:'',
        type:'add'
      }
      this.userList.push(item)
      this.newUserList.push(item)
    }
  }
}
</script>

<style scoped>
.addFleet{
  display: flex;
  justify-content: flex-end;
}
</style>